<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>华为商城VMALL</title>
	<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
	<!-- 引入字体图标 -->
	<link rel="stylesheet" href="http://at.alicdn.com/t/c/font_4455254_oyid2n68nr.css">
	<!-- 引入首页样式表 -->
	<link rel="stylesheet" href="./css/index.css">
</head>

<body>
	<!-- 顶部 start -->
	<div class="top">
		<div class="container">
			<div class="topl">
				<ul class="toplist">
					<li>
						<a href="">首页</a>
						<span>|</span>
					</li>
					<li>
						<a href="">消费者业务网站</a>
						<span>|</span>
					</li>
					<li>
						<a href="">V码(优购码)</a>
						<span>|</span>
					</li>
					<li>
						<a href="">企业商用</a>
						<span>|</span>
					</li>
					<li>
						<a href="">Select Region</a>
						<span>|</span>
					</li>
					<li class="topmore">
						<a href="">更多精彩</a>
						<i class="iconfont icon-xiajiantou"></i>

						<!-- 消失内容 -->
						<ul>
							<li>HarmonyOS</li>
							<li>应用市场</li>
							<li>华为终端云空间</li>
							<li>开发者联盟</li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="topr">
				<div class="shopcar">
					<i class="iconfont icon-gouwuche"></i>购物车(0)

					<!--  -->
				</div>
				<div class="toprl">
					<ul class="toplist">
						<li>
							<a href="">请登录</a>
						</li>
						<li>
							<a href="">注册</a>
							<span>|</span>
						</li>
						<li>
							<a href="">我的订单</a>
							<span>|</span>
						</li>
						<li class="topmore">
							<a href="">客服</a>
							<i class="iconfont icon-xiajiantou"></i>
							<span>|</span>

							<!-- 消失内容 -->
							<ul>
								<li>HarmonyOS</li>
								<li>应用市场</li>
							</ul>
						</li>
						<li>
							<a href="">网站导航</a>
							<i class="iconfont icon-xiajiantou"></i>
							<span>|</span>
						</li>
						<li>
							<a href="">手机版</a>
							<i class="iconfont icon-xiajiantou"></i>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!-- 顶部 end -->
	<!-- logo start -->
	<div class="logo">
		<div class="container">
			<img src="./img/logo_app.png" alt="">
			<ul>
				<li>
					<a href="">华为</a>
				</li>
				<li>
					<a href="">鸿蒙智行</a>
				</li>
				<li>
					<a href="">华为智选</a>
				</li>
				<li>
					<a href="">生态周边</a>
				</li>
			</ul>
			<i class="iconfont icon-sousuo"></i>
		</div>
	</div>
	<!-- logo end -->
	<!-- banner start -->
	<div class="banner">
		<ul class="imglist">
			<li>
				<img src="./img/banner1.webp" alt="">
			</li>
		</ul>
		<ul class="menulist">
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
			<li>
				<span>手机</span>
				<i class="iconfont icon-youjiantou"></i>
			</li>
		</ul>
		<!-- 轮播点 -->
		<ol class="dotlist">
			<li class="active"></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ol>
	</div>
	<!-- banner end -->
	<!-- 分类 start -->
	<div class="cate">
		<div class="container">
			<ul>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate2.webp" alt="">
					<p>智能家居</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
				<li>
					<img src="./img/cate1.webp" alt="">
					<p>智慧办公</p>
				</li>
			</ul>
		</div>
	</div>
	<!-- 分类 end -->
	<!-- 列表 start -->
	<div class="list">
		<div class="container">
			<!-- 标题 -->
			<div class="title">
				<h2>甄选推荐</h2>
			</div>
			<!-- 内容 -->
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li class="nomar"></li>
			</ul>
		</div>
	</div>
	<!-- 列表 end -->
	<!-- 列表 start -->
	<div class="list">
		<div class="container">
			<!-- 标题 -->
			<div class="title">
				<h2>手机专区</h2>
				<div class="more">
					<a href="">更多</a>
					<i class="iconfont icon-youjiantou"></i>
				</div>
			</div>
			<!-- 内容 -->
			<ul>
				<li>
					<img src="./img/phone.webp" alt="">
					<h3>nova 11 SE</h3>
					<p>3200万高清自拍 | 一亿像素光影人像</p>
					<div class="info">
						<span>限时直降100元</span>
						<b>限时赠</b>
						<b>赠积分</b>
					</div>
					<div class="price">
						<b>¥1899</b>
						<del>¥1999</del>
					</div>
				</li>
				<li>
					<img src="./img/phone.webp" alt="">
					<h3>nova 11 SE</h3>
					<p>3200万高清自拍 | 一亿像素光影人像</p>
					<div class="info">
						<b>赠积分</b>
					</div>
					<div class="price">
						<b>¥1899</b>
					</div>
				</li>
				<li></li>
				<li class="nomar"></li>
				<li></li>
				<li></li>
				<li></li>
				<li class="nomar"></li>
			</ul>
		</div>
	</div>
	<!-- 列表 end -->
</body>

</html>